<template>
	<view class="order-box">
		<view class="order-item" v-for="(item, index) in orderList" :key="index">
			<!-- 选择框 -->
			<view class="checkbox-wrapper" @click="toggleSelect(index)">
				<view class="checkbox" :class="{ 'checked': item.selected }">
					<view class="check-icon" v-if="item.selected"></view>
				</view>
			</view>

			<!-- 商品信息 -->
			<view class="product-info">
				<!-- 图片 -->
				<view>
					<image :src="item.image" class="product-image"></image>
					<view class="dot3-style">
						<view>.</view>
						<view>.</view>
						<view>.</view>
					</view>
				</view>

				<view class="info-right">
					<!-- 商品名和单价 -->
					<view class="title-style">
						<view class="product-title">{{item.title}}</view>
						<view>
							<text class="price1">{{item.price}} {{$t('cart.account1')}}</text>
						</view>
					</view>
					<!-- 标签和数量 -->
					<view class="product-desc title-style">
						<view style="display: flex;">
							<view class="icon-box">
								<image src="/static/icon/edit1.png" class="edit-icon"></image>
							</view>
							<view>{{item.desc}}</view>
						</view>
						<view style="display: flex;">
							<view class="icon-box">
								<image src="/static/icon/edit1.png" class="edit-icon"></image>
							</view>
							<view style="color: #010101;">×1</view>
						</view>
					</view>
					<!-- 详情按钮和总价 -->
					<view class="goods-info">
						<view>
							<button class="detail-btn">{{$t('cart.btn.detail')}}</button>
						</view>
						<view style="display: flex;height: 1.44rem;line-height: 1.44rem;">
							<view style="color:#101010 80%;">{{$t('cart.need.pay')}}</view>
							<view style="margin-left: 0.5rem;font-weight: 600;">{{(item.price * 1).toFixed(2)}}
								{{$t('cart.account1')}}
							</view>
						</view>
					</view>
					<!-- 商品状态 -->
					<view class="status-info">
							<view style="display: flex;">
								<view class="icon-box">
									<image src="/static/icon/edit1.png" class="edit-icon"></image>
								</view>
								<view style="white-space: nowrap;">{{$t('cart.sendto')}}:</view>
								<image src="/static/icon/address.png" class="address-icon"></image>
								<view class="address">保利10栋3单元1202</view>
							</view>
							<view>
								<button class="pay-btn">{{$t('cart.pay')}}</button>
							</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'

	interface OrderItem {
		image : string;
		title : string;
		desc : string;
		price : number;
		count : number;
		selected : boolean;
	}

	const orderList = ref<OrderItem[]>([
		{
			image: '/static/img/hide.jpg',
			title: '商品描述商品描述商品描述商品描述商品描述',
			desc: '首发、动物园系列、单体',
			price: 68.99,
			count: 1,
			selected: false
		},
		{
			image: '/static/img/hide.jpg',
			title: '商品描述商品描述商品描述商品描述商品描述商品描述',
			desc: '迪士尼动物七毛毛、单体',
			price: 68.99,
			count: 1,
			selected: false
		},
		{
			image: '/static/img/hide.jpg',
			title: '商品描述商品描述商品描述',
			desc: '动物园系列一整套（12个）',
			price: 599.00,
			count: 1,
			selected: false
		},
		{
			image: '/static/img/hide.jpg',
			title: '商品描述商品描述商品描述商品描述商品描述商品描述',
			desc: '迪士尼动物七毛毛、单体',
			price: 68.99,
			count: 1,
			selected: false
		},
		{
			image: '/static/img/hide.jpg',
			title: '商品描述商品描述商品描述',
			desc: '动物园系列一整套（12个）',
			price: 599.00,
			count: 1,
			selected: false
		}
	])

	const toggleSelect = (index : number) => {
		orderList.value[index].selected = !orderList.value[index].selected
	}
</script>

<style scoped lang="scss">
	.order-box {
		width: 100%;
		// background-color: #F8F8F8;
	}

	.order-item {
		padding: 0.3rem 0.8rem 0.5rem 0.3rem;
		background: #FFFFFF;
		border-radius: 0.6rem;
		margin-bottom: 0.8rem;
	}

	.checkbox-wrapper {
		// margin-bottom: 0.1rem;
	}

	.checkbox {
		width: 1rem;
		height: 1rem;
		border: 2px solid #DDDDDD;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;

		&.checked {
			border-color: #E1939C;
		}
	}

	.check-icon {
		width: 0.6rem;
		height: 0.6rem;
		border-radius: 50%;
		background: #E1939C;
		font-size: 0.8rem;
		line-height: 1;
	}

	.product-info {
		flex: 1;
		display: flex;
		margin: -0.3rem 0 0 0.9rem;
	}

	.product-image {
		width: 6rem;
		height: 6.5rem;
		border-radius: 0.63rem;
		background: #F5F5F5;
		margin-right: 0.8rem;
	}

	.info-right {
		flex: 1;
		margin-top: 1rem;
	}

	.title-style {
		display: flex;
		font-size: 0.75rem;
		font-weight: 600;
		justify-content: space-between;
	}

	.product-title {
		width: 9.06rem;
		height: 1.06rem;
		line-height: 1.06rem;
		color: #101010;
		margin-left: 1rem;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.price1 {
		white-space: nowrap;
	}

	.icon-box {
		width: 0.88rem;
		height: 0.88rem;
		border-radius: 0.25rem;
		text-align: center;
		border: 0.06rem solid rgba(187, 187, 187, 1);
		margin: 0 0.2rem 0 -0.2rem;
	}

	.edit-icon {
		width: 0.69rem;
		height: 0.69rem;
	}

	.product-desc {
		font-size: 0.75rem;
		font-weight: 600;
		color: #999999;
		margin: 0.4rem 0;
		display: flex;
	}

	.goods-info {
		display: flex;
		font-size: 0.63rem;
		color: rgba(16, 16, 16, 1);
		justify-content: space-between;
		margin: 1.38rem 0 0 1rem;
	}

	.detail-btn {
		padding: 0;
		border: none;
		width: 4.8rem;
		height: 1.44rem;
		line-height: 1.44rem;
		border-radius: 0.25rem;
		background-color: rgba(0, 0, 0, 0.2);
		font-size: 0.63rem;
	}

	.status-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 1.2rem;
		color: #BBBBBB;
		font-size: 0.63rem;
		font-weight: 600;
	}

	.dot3-style {
		width: 2.28rem;
		height: 1.31rem;
		line-height: 0.436rem;
		margin: 0.3rem 0.2rem;
	}
	
	.address-icon{
		width: 1.31rem;
		height: 1.31rem;
		margin: -0.2rem 0.2rem 0;
	}
	.address{
		width: 4rem;
		height: 0.88rem;
		line-height: 0.88rem;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.pay-btn{
		width: 5rem;
		height: 1.75rem;
		line-height: 1.75rem;
		border-radius: 0.25rem;
		border: none;
		background-color: rgba(234,179,184,0.4);
		color: rgba(225,147,156,1);
		font-size: 0.63rem;
		text-align: center;
	}
</style>